<template>
	<view>
		<!-- 如果动态改变标签的颜色:class="[item.type==0 ? 'bg-abrown': item.type==1 ? 'bg-agreen': '']" -->
		<view class="flex align-center">
			<text class="cu-tag tag text-white radius bg-tagorange">{{leftText}}</text>
			<view class="flex align-center icon_arrowbox">
				<view class="triangle_box" >
					<text class="triangle-left"></text>
				</view>
				<text class="cu-tag tag tag-right">{{rightText}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.bg-tagorange {
		background-color: #FF6C34;
	}
	.tag {
		height: 32rpx!important;
		
	}
	.icon_arrowbox {
		position: relative;
		height: 32rpx;

		.triangle_box {
			background-color: #FF6C34;
			height: 32rpx !important;
			margin-left: -2px !important;

			.triangle-left {
				display: inline-block;
				width: 0;
				height: 0;
				border-top: 8px solid transparent;
				border-right: 6px solid #f6f6f6;
				border-bottom: 8px solid transparent;
			}
		}
	}
	.tag-right {
		background-color: #FFFFFF!important;
		margin-left: -2px;
		border: 1px solid #FF6C34;
		border-left:none;
		border-radius: 3px;
		color: #FF6C34;
	}
</style>
